<template>
    <div>
        <dao-hang></dao-hang>

        <div style="display: flex;">
            <div style="flex: 1%;"></div>
            <!--                中央布局内-->
            <div style="background-color: white;width: 1730px; margin-top:90px;margin-right:170px;flex:12;border-radius: 4px;display: flex;margin-bottom: 10px;">

                <div style="margin-left: 150px;margin-right: 100px;">
                    <el-image style="width: 1500px;height: 800px;margin-left: 50px;"
                              src="https://img0.baidu.com/it/u=3831417566,2495420600&fm=26&fmt=auto&gp=0.jpg"></el-image>


                    <div style="margin-top: 100px;margin-left: 200px;margin-right: 180px;">
                        <div style="margin-bottom: 150px;">
                            <h1 style="position: absolute;left: 900px;top: 950px;">{{infomain.cotitle}}</h1>
                        </div>
                        <div style=" font-size: 20px;margin-bottom: 50px;">
                            <span style="position:absolute;top: 1060px;"
                                  class="el-icon-user"> 作者：{{infomain.name}}</span>
                            <span style="position:absolute;left:1000px;top: 1060px;"
                                  class="el-icon-notebook-2"> 类别：植物</span>
                            <span style="position: absolute;left: 800px;top: 1060px;" class="el-icon-view"> 浏览数：{{infomain.count}}</span>
                            <span style="position:absolute;left:1200px;top: 1060px;" class="el-icon-time"> 创建时间：{{infomain.data}}</span>
                        </div>

                        <el-divider></el-divider>
                        <div style="margin-top: 100px">
                            <h2 class="el-icon-tickets"> 摘要</h2>
                            <p v-html="infomain.tabook" style="font-size: 30px;"></p>
                            <h2 class="el-icon-tickets" style="margin-top: 50px;"> 正文</h2>
                            <p v-html="infomain.conten" style="font-size: 30px;"></p>
                        </div>
                    </div>


                    <div>
                        <el-divider content-position="center" style=""><span
                                style="font-weight: bold;font-size: 20px">评论区</span></el-divider>

                        <!--                    展示评论-->
                        <!--         评论模块-->
                        <div style="width: 95%;margin: auto;background-color: white;" class="PlBulk"
                             v-for="(item,index) in commtent" :key="index">

                            <div style="border-bottom: solid 1px darkgray;width:98%;margin: auto;">
                                <div style="display: flex;height: 50px">
                                    <div style="flex: 5%">
                                        <!--                头像-->
                                        <div style="width: 40px;height: 40px;border-radius: 50%;overflow:hidden;margin: 5px">
                                            <img :src="item.headima" width="100%" height="100%">
                                        </div>
                                    </div>
                                    <!--              评论者姓名-->
                                    <div style="flex: 95%">
                                        <span style="font-weight: bold; line-height: 70px">{{ item.name }}</span>
                                        <span style="float: right;line-height: 70px">{{item.date}}</span>
                                    </div>
                                </div>
                                <div style="padding: 1px 45px;" v-html="item.comm"></div>


                                <div style="position: relative;height: 25px">
                                    <el-button @click="HuiRep(item)"
                                               type="success"
                                               style="position: relative;top:-30px;left:1200px;background-color: #66b1ff ">
                                        回复
                                    </el-button>
                                    <span @click="lookComm(item)"
                                          style="cursor: pointer;color: #409EFF;position: relative;top: -20px;">
                        查看回复 </span>


                                </div>


                                <el-collapse-transition>
                                    <div v-show="item.replytoo"
                                         style="width: 92%;margin: auto;font-size: 14px;border-top: dashed 1px darkgray">
                                        <!--               回复区-->
                                        <div v-for="(itemto,index) in Huito" :key="index">

                                            <div v-if="item.id==itemto.Lid">
                                            <div style="display: flex">
                                                <div style="flex:4%">
                                                    <div style="width: 40px;height: 40px;border-radius: 60%;overflow:hidden;margin: 5px 0">
                                                        <img :src="itemto.replyima" width="100%" height="100%">
                                                    </div>
                                                </div>
                                                <div style="flex: 95%;position: relative">
                                                    <span style="position: absolute;bottom: 1px;line-height: 50px;font-size: 15px;">{{itemto.name }}</span>
                                                    <span style="position: absolute;right: 5px;top: 10px">{{ itemto.date }}</span>
                                                </div>
                                            </div>
                                            <div style="padding: 1px 45px;" v-html="itemto.replyto"></div>
<!--                                            -->



                                                    <div v-show="itemto.ranto" >
                                                        <ckeditor v-model="Huicomment.replyto" ></ckeditor>
                                                    </div>

<!--                                                        <el-button type="success"  style="position: relative;left: 1200px;top: -50px;" @click="biloc(itemto.id)" >就挑你了</el-button>-->




                                            </div>

                                        </div>

                                    </div>

                                </el-collapse-transition>



                                <el-collapse-transition>
                                    <div v-show="item.Rep">
                                        <div style="margin: 5px auto;width: 98%">
                                            <ckeditor v-model="Huicomment.replyto"></ckeditor>
                                        </div>
                                        <div style="position:relative;height: 50px">
                                            <el-button type="success" style="position:absolute;left: 500px;"
                                                       @click="HuiComm(item.id)">回复
                                            </el-button>
                                        </div>

                                    </div>
                                </el-collapse-transition>





                            </div>
                        </div>

                        <div style="width:700px;margin-left: 450px;">
                            <ckeditor v-model="getcomm.comm"></ckeditor>
                        </div>

                        <p style="text-align: center">
                            <el-button type="success" style="width: 100px" @click="GetComm()">评论</el-button>
                        </p>

                    </div>
                </div>


            </div>


        </div>


    </div>
</template>

<script>
    export default {
        name: "mybolgs",
        data() {
            return {
                infomain: {
                    conten: '',
                    tabook: '',
                    cotitle: '',
                },
                token: '',
                id: this.$route.query.id,
                userInfo: {
                    ima: '',
                    id: "",
                },
                commtent: {},
                getcomm: {
                    comm: "",
                },
                activeName: '1',//折叠面板
                replyid: '',
                Huicomment: {
                    replyto: ''
                },
                Huito: {},
                clos: {},
            }
        },
        mounted() {
        this.tolok();
            //展示博客信息
            this.$axios.post('api/conten/infoma', {id: this.id}).then(res => {
                console.log(res)
                this.infomain = res.data.data;
            });

            this.$axios.get("/api/user/main/info", {headers: {TOKEN: this.token}}).then(res => {
                console.log(res)
                this.userInfo = res.data.data;

            });

            this.$axios.post("/api/comment/showcomment", {Tid: this.id}).then(res => {
                console.log(res)
                this.commtent = res.data.data;
            })
            this.ShowHui();
            this.ShowComm();
        },
        methods: {
            tolok(){
                this.$axios.get("/api/user/main/info", {headers: {TOKEN: this.token}}).then(res => {
                    console.log(res)
                    this.userInfo = res.data.data;

                });
            },


            //再次回复
            biloc(info){
              info.ranto =!info.ranto;
             console.log(info)

            },



            //查看回复 , 如果不显示回复就隐藏
            lookComm(info) {
                info.replytoo = !info.replytoo;
                this.$forceUpdate();
                this.replyid = info.id;
                this.ShowHui();

            },
            HuiRep(info) {



                // this.$axios.post("/api/reply/showhui", {Lid: this.replyid}).then(res => {
                //     this.Huito = res.data.data;
                //     console.log(res)
                // })
                if (localStorage.getItem('TOKEN')==null){
                    this.$message({
                        message:"不要白嫖回复好吗？",
                        type:'warning',
                        next:('/login')
                    })
                }else {
                    info.Rep = !info.Rep;
                }
                this.$axios.get("/api/user/main/info",{headers: {TOKEN: this.token}} ).then(res => {
                    console.log(res)
                    this.userInfo = res.data.data;

                });

                this.$forceUpdate();
            },


            //发布评论
            GetComm() {
                this.getcomm.Pid = this.userInfo.id;
                this.getcomm.Tid = this.id;
                console.log(this.id)
                this.getcomm.name = this.userInfo.name;
                this.getcomm.headima = this.userInfo.ima;
                this.$axios.post("/api/comment/getcomment", this.getcomm).then(res => {
                    console.log(this.getcomm)
                    if (res.data.status === 1) {
                        this.$message.success(res.data.msg);
                        this.ShowComm();
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
            },

            ShowComm() {
                //展示评论
                this.$axios.post("/api/comment/showcomment", {Tid: this.id}).then(res => {
                    console.log(res)
                    this.commtent = res.data.data;
                })
            },

            //回复评论
            HuiComm(show) {
            console.log(show)
                if (this.userInfo.token==null){
                    this.$message({
                        message:"不要白嫖好吗,多少给点！",
                        type:'warning',
                        next:('/login'),
                    })
                }else {
                    this.Huicomment.Lid = show;0
                    console.log(this.Huicomment.Lid)
                    this.Huicomment.name = this.userInfo.name;
                    this.Huicomment.replyima = this.userInfo.ima;
                    this.$axios.post("/api/reply/gethui", this.Huicomment).then(res => {
                        console.log(res)
                        this.Huicomment = res.data.data;
                        if (res.data.status === 1) {
                            this.$message.success(res.data.msg);

                            this.ShowHui();
                            this.Huicomment={};
                            // this.ShowHuiNow();
                            // location.reload();
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    })
                }




            },



            //显示回复
            ShowHui() {
                this.$axios.post("/api/reply/shohui2",this.Huito).then(res => {
                    console.log(res)
                    this.Huito = res.data.data;
                })
            },

            // //展示回复
            // ShowHuiNow() {
            //     this.$axios.post("/api/reply/showhui", {Lid: this.replyid}).then(res => {
            //         console.log(this.replyid);
            //         this.Huito = res.data.data;
            //         console.log(this.Huito)
            //     })
            // }


        },


    }
</script>

<style scoped>

</style>